<template>
  <div ref="chart" class="the-time-chart"></div>
</template>
<script>
import axios from "axios";
import * as echarts from 'echarts';
// var echarts = require("echarts/lib/echarts");
// require("echarts/lib/chart/scatter");
// require("echarts/lib/chart/line");
// require("echarts/lib/component/tooltip");
// require("echarts/lib/component/title");
// require("echarts/lib/component/axis");

const Baltic_Squad_KillGroggyBluezone_TIME =
  "http://m.tuniucdn.com/fb2/t1/G6/M00/D9/9B/Cii-TF7g9wuIEAB6AAKBquiBsIMAANG3wJaK_IAAoHC25.json";
export default {
  name: "TimeOfEvents",
  data() {
    return {};
  },
  mounted() {
    let ele = this.$refs["chart"];
    let chart = echarts.init(ele);
    this.ajaxGetData().then(data => {
      // debugger;
      chart.setOption({
        title: {
          text: "time"
        },
        tooltip: {},
        xAxis: {
          type: "time",
          name: "时间"
        },
        yAxis: {
          type: "value",
          // data: ["circle", "kill_groggy"]
        },
        dataZoom: [
          {
            type: "inside"
          }
        ],
        brush: {},
        series: [
          {
            name: "Kill or groggy",
            type: "line",
            data: data["data"].map(tstp => [
              new Date(tstp.timestamp),
              tstp.died_count
            ]),
            itemStyle: {
              color: "rgba(128, 128, 128, 0.8)"
            },
            symbolSize: 5
          },
          // {
          //   name: "circle",
          //   type: "scatter",
          //   data: data.CIRCLE_TIMES.map(tstp => [new Date(tstp), "circle"])
          // }
        ]
      });
    });
  },
  methods: {
    ajaxGetData() {
      return new Promise(resolve => {
        axios
          .get(Baltic_Squad_KillGroggyBluezone_TIME)
          .then(axresp => {
            resolve(axresp.data);
          })
          .catch(axerr => {
            debugger;
          });
      });
    }
  }
};
</script>
<style lang="less" scoped>
.the-time-chart {
  width: 1900px;
  height: 500px;
}
</style>